<template>
  <div class="header">
    <div class="content-wrapper">
      <div class="avatar">
        <img width="64" height="64" :src="sellers.avatar" />
      </div>
      <div class="content">
        <div class="title">
          <span class="brand"></span>
          <span class="name">{{sellers.name}}</span>
        </div>
        <div class="description">{{sellers.description}}/{{sellers.deliveryTime}}分钟送达</div>
        <div class="supports" v-if="sellers.supports">
          <span class="icon" :class="classMap[sellers.supports[0].type]"></span>
          <span class="text">{{sellers.supports[0].description}}</span>
        </div>
      </div>
      <div v-if="sellers.supports"  class="support-count">
        <i></i>
      </div>
    </div>
    <div class="bulletin-wrapper" @click="showDetail">
      <span class="title"></span>
      <span class="text">{{sellers.bulletin}}</span>
    </div>
    <div class="background">
      <img :src="sellers.avatar" width="100%" height="100%"/>
    </div>

    <div v-show="detailShow" class="detail">
      <div class="detail-wrapper clearfix">
        <div class="detail-main">
          <div>{{sellers.bulletin}}</div>
          <div>{{sellers.bulletin}}</div>
          <div>{{sellers.bulletin}}</div>
          <div>{{sellers.bulletin}}</div>
          <div>{{sellers.bulletin}}</div>
          <div>{{sellers.bulletin}}</div>
          <div>{{sellers.bulletin}}</div>
          <div>{{sellers.bulletin}}</div>
          <div>{{sellers.bulletin}}</div>
          <div>{{sellers.bulletin}}</div>
        </div>
      </div>
      <div class="detail-close">
        <img src='./star24_on@2x.png' class="close"/>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    props: {
      sellers: {
        type: Object
      }
    },
    data () {
      return {
        detailShow: false
      }
    },
    methods: {
      showDetail () {
        console.log(this.detailShow)
        this.detailShow = true
      }
    },
    created () {
      this.classMap = ['decrease']
    }
  }
</script>

<style>
  .header {
    color:#fff;
    background:rgba(7,17,27,0.5);
    overflow:hidden;
    position:relative;
  }
  .content-wrapper {
    padding:24px 12px 18px 24px;
    font-size:0;
  }
  .avatar {
    display:inline-block;
    vertical-align:top;
  }
  .avatar img {
    border-radius:2px;
  }
  .content {
    display:inline-block;
    margin-left:16px;
    font-size:14px;
  }
  .title {
    margin: 2px 0 8px 0;
  }
  .brand {
    display:inline-block;
    vertical-align:top;
    width:30px;
    height:18px;
    background-image:url('./brand@2x.png');
    background-size:30px 18px;
    background-repeat:no-repeat;
  }
  .name {
    margin-left:6px;
    font-size:16px;
    line-height:18px;
    font-weight:bold;
  }
  .description {
    margin-bottom:10px;
    line-height:12px;
    font-size:12px;
  }
  .supports {

  }
  .icon {
    display:inline-block;
    width:12px;
    height:12px;
    margin-right:4px;
    background-size:12px;
    background-repeat:no-repeat;
  }
  span.decrease {
    background-image:url('./decrease_1@2x.png');
  }
  .bulletin-wrapper {
    height:28px;
    line-height:28px;
    padding:0 22px 0 12px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    font-size:0;
    background:pink;
  }
  .bulletin-wrapper .title {
    vertical-align:middle;
    display:inline-block;
    width:22px;
    height:12px;
    background-size:22px;
    background-repeat:no-repeat;
    background-image:url('./bulletin@2x.png');

  }
  .bulletin-wrapper .text {
    font-size:10px;
    margin:0 4px;
  }
  .background {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    z-index:-1;
    filter:blur(10px)
  }
  .detail {
    position:fixed;
    z-index:100;
    left:0;
    top:0;
    width:100%;
    height:100%;
    overflow:auto;
    background:rgba(7,17,27,0.8);
  }
  .clearfix {
    display:inline-block;
    clear:both;
  }

  .detail-wrapper {
    min-height:100%;

  }
  .detail-main {
    margin-top:64px;
    padding-bottom:64px;
  }
  .detail-close {
    position:relative;
    width:32px;
    height:32px;
    margin:-64px auto 0 auto;
    clear:both;
    font-size:32px;
  }
  .detail-close .close {
      width:100%;
      height:100%;
  }
</style>
